<template>
<el-row class="block wdh-table table-box" v-loading="loading">

    <el-table :data="tableData" class="table-main" :class="operationsShow ? '' : 'no-operation'" stripe max-height="500" ref="table" @selection-change="handleSelectionChange" @sort-change="sortChange" :row-class-name="tableRowClassName">
        <el-table-column label="操作" :width="opLeft" v-if="opLeft !== ''">
            <template slot-scope="scope">
                <slot name="op-left" :row="scope.row"></slot>
            </template>
        </el-table-column>

        <el-table-column prop="checked" label="" width="50" v-if="batch =='batch'">
            <template slot-scope="scope">
                <el-checkbox v-model="scope.row.checked"></el-checkbox>
            </template>
        </el-table-column>

        <template v-else>
            <el-table-column v-if="checkbox" type="selection" label="selection"></el-table-column>
            <el-table-column v-if="index" type="index" label="序号" width="65"></el-table-column>
        </template>

        <template v-for="(field,index) in fields">
            <el-table-column v-if="field.click !== undefined" :label="field.label" :width="field.width">
                <template slot-scope="scope">
                    <el-button @click="call(field.click, field.args_field !== undefined ? scope.row[field.args_field] : scope.row.id)" :key="field.text" type="text" size="small">{{scope.row[field.text]}}</el-button>
                </template>

            </el-table-column>
            <el-table-column v-else-if="field.colour === true" :label="field.label" :width="field.width">
                <template slot-scope="scope">
                    <p class="green" v-if="scope.row[field.text] === '进行中'">{{scope.row[field.text]}}</p>
                    <p v-else>{{scope.row[field.text]}}</p>
                </template>
            </el-table-column>
            <el-table-column v-else-if="field.scope" :label="field.label" :width="field.width" :sortable="field.sortable ? 'custom' : false" :sort-orders="sortOrders">
                <template slot-scope="scope">
                    <div v-html="field.scope(scope)"></div>
                </template>
            </el-table-column>
            <el-table-column v-else :prop="field.text" :label="field.label" :width="field.width" :sortable="field.sortable ? 'custom' : false" :sort-orders="sortOrders">
                <template slot="header" v-if="field.text==='dr'&&showQuestionMark">
                    折扣费比
                    <el-tooltip style="margin-left: 5%" content="折扣费比=优惠券总金额/原价总金额" placement="top" effect="light">
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
        </template>

        <el-table-column label="操作" :width="opRight" v-if="opRight !== ''">
            <template slot-scope="scope">
                <slot name="op-right" :row="scope.row"></slot>
            </template>
        </el-table-column>
        <template v-else>
            <el-table-column fixed="right" label="操作" v-if="operationsShow" :width="operationsWidth">
                <template slot-scope="scope">
                    <template v-if="scope.row.operations.length > 0 && !showTranfer">
                        <el-button v-for="op in scope.row.operations" :key="op.text" @click="call(op.text, scope.row)" :disabled="op.disabled" type="text" size="small">{{op.label}}</el-button>
                    </template>
                    <template v-else-if="showTranfer">
                       <el-button type="text" size="small" @click="tranferSelf(scope.row)">转移</el-button>
                    </template>

                    <template v-else>
                        <el-row class="op-empty"></el-row>
                    </template>
                </template>
            </el-table-column>
        </template>

    </el-table>

    <!--searchParams.type === 1不定位到页面底部-->
    <el-row class="block" v-if="total > 0 && ispagination" style="text-align: right" :class="searchParams.type === 1 ? 'margin-top':'wdh-but-fixed'">
        <el-pagination background @size-change="changeLimit" @current-change="changePage" :current-page="page" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="limit" layout="total, sizes, prev, pager, next" :total="total">
        </el-pagination>
    </el-row>


</el-row>
</template>

<script>
export default {
    props: {
        init: {
            type: [String, Boolean],
            default: true
        },
        checkbox: { //多选
            type: Boolean,
            default: false
        },
        index: { //是否显示表格序号
            type: Boolean,
            default: false
        },
        fields: { //表格展示列
            type: Array,
            required: true
        },
        url: { //列表查询请求地址
            type: String,
            required: true
        },
        opRight: {
            type: String,
            default: ''
        },
        opLeft: {
            type: String,
            default: ''
        },
        operationsShow: { //是否显示操作列
            type: Boolean,
            default: true
        },
        searchParams: {
            type: Object,
            default () {
                return {};
            }
        },
        operationsWidth: { //操作宽度
            type: String,
            default: ''
        },
        operationsList: {
            type: Array,
            default () {
                return []
            }
        },
        multipleSelectionAll: {
            type: Object,
            default () {
                return []
            }
        },
        ispagination: {
            type: Boolean,
            default: true
        },
        showQuestionMark: {
            type: Boolean,
            default: false
        }


        ,showTranfer: { //只显示转移
            type: Boolean,
            default: false
        }
        // ,isShowUnbundling: {    //显示解绑会员和解绑自提点
        //     type: Boolean,
        //     default: false
        // }
        ,batch: {
            type: String,
            default: ""
        }
    },

    mounted() {
        if (this.init === true || this.init === 'true') {
            this.search();
        }
    },
    data() {
        return {
            loading: false,
            total: 0, //总数量
            page: 1, //当前页
            limit: 10, //每页查询数
            tableData: [], //表格数据
            sortOrders: ['descending', 'ascending', null],
            order_by: '',
            sort: '',
        }
    },

    methods: {
        call(op, row) {
            this.$emit('call', op, row);
            this.$emit(op, row);
        },

        goSearch(page = 1) {
            this.page = page;
            this.search();
        },

        //列表查询
        search() {
            let _this = this;
            let params = this.searchParams;
            params['page'] = this.page;
            params['limit'] = this.limit;

            if(this.url == "/assistant/transfer/bindingregimentalslist"){
                this.loading = true;
                this.$http.get(this.url, {
                    params: params
                }).then((response) => {
                    this.loading = false;
                    let dt = response.data.data.data;
                    if (dt.length !== 0) {
                        if (this.operationsShow && !dt[0]['operations']) {
                            let i;
                            for (i in dt) {
                                if (this.operationsList.length > 0) {
                                    dt[i]['operations'] = this.operationsList;
                                } else {
                                    dt[i]['operations'] = [{
                                            label: '解绑',
                                            text: 'UnbundlingBtn'
                                        }
                                    ];
                                }
                                
                            }
                        }
                    }
                    this.tableData = dt;

                    if(this.batch =='batch'){
                        this.tableData.forEach(el=>{
                            this.$set(el,"checked", false)
                        })
                    }
               
                    this.total = response.data.data.total;
                    this.$nextTick(() => {
                        _this.setSelectRow();
                })
            }).catch(function (error) {
                _this.loading = false;
                console.log(error);
            });

            }else{

                params['page'] = this.page;
                params['limit'] = this.limit;
                params['order_by'] = this.order_by;
                params['sort'] = this.sort;

                this.loading = true;
                this.$http.get(this.url, {
                    params: params
                }).then((response) => {
                    this.loading = false;
                    let dt = response.data.data;
                    if (dt.length !== 0) {
                        if (this.operationsShow && !dt[0]['operations']) {
                            let i;
                            for (i in dt) {
                                if (this.operationsList.length > 0) {
                                    dt[i]['operations'] = this.operationsList;
                                } else {
                                    dt[i]['operations'] = [{
                                            label: '编辑',
                                            text: 'edit'
                                        },
                                        {
                                            label: '删除',
                                            text: 'del'
                                        }
                                    ];
                                }
                                
                            }
                        }
                    }
                    this.tableData = dt;
                    if(this.batch =='batch'){
                        this.tableData.forEach(el=>{
                            this.$set(el,"checked", false)
                        })
                    }
                    this.total = response.data.total;
                    this.store_id = response.data.store_id;
                    this.$nextTick(() => {
                        _this.setSelectRow();
                    })
                }).catch(function (error) {
                    _this.loading = false;
                    console.log(error);
                });
            }

        },

        //切换显示数量
        changeLimit(limit) {
            this.limit = limit;
            this.search();
            return false;
        },

        //切换分页
        changePage(page) {
            this.page = page;
            // this.setSelectRow();
            this.$emit('change-PageCoreRecordData')
            this.search();
            return false;
        },

        handleSelectionChange(value) {
            this.$emit('handleSelection', value);
        },
        sortChange({
            column,
            prop,
            order
        }) {
            this.order_by = prop;
            this.sort = order;
            this.$emit('sortChange', {
                column,
                prop,
                order
            });
            this.goSearch();
        },
        tableRowClassName({
            row,
            rowIndex
        }) {
            if (row.high_light === true) {
                return 'success-row';
            }
            return '';
        },
        // 通过数据设置需要勾选的列表
        setSelectRow() {
            // console.log(this.allCheckList, '------------')
            // this.$refs.table.clearSelection();
            // this.$refs.table.toggleRowSelection(this.allCheckList[this.page], true);
            if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
                return;
            }

            // 标识当前行的唯一键的名称
            let idKey = 'id'
            let selectAllIds = [];
            this.multipleSelectionAll.forEach(row => {
                selectAllIds.push(row[idKey]);
            })

            this.multipleSelectionAll.forEach(row => {
                selectAllIds.push(row[idKey]);
            })
            this.$refs.table.clearSelection();
            for (let i = 0; i < this.tableData.length; i++) {
                if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
                    this.$refs.table.toggleRowSelection(this.tableData[i], true);
                }
            }

        }

        ,tranferSelf(row){
            this.$emit("tranferSelf",true, row.id);
        }
        ,countChecked(){
            let batchArr = [];
            this.tableData.forEach(el=>{
                if(el.checked === true){
                    batchArr.push(el.id)
                }
            })
            if(batchArr.length <=0){
                return true;
            }
            return false;
        }
        ,batchunbundling(){
            let batchArr = [];
            this.tableData.forEach(el=>{
                if(el.checked === true){
                    batchArr.push(el.id)
                }
            })
            if(batchArr.length <=0){
                this.$message.error("请选择要解绑的自提点");
                return false;
            }
            this.loading = true;
            this.$http.post("/assistant/transfer/unbundlingmember", {
                ids: batchArr,
                type: 2
            }).then((res) => {
                this.loading = false;
                if(res.data.code ==200){
                    this.$message.success("解绑成功");
                    this.$router.go(0);
                }else{
                    this.$message.error(res.data.message);
                }
                
            }).catch((res) => {
                this.$message.error(res);
            });
        },
        batchTransfer(){
            let batchArr = [];
            this.tableData.forEach(el=>{
                if(el.checked === true){
                    batchArr.push(el.id)
                }
            })
            this.$emit("tranferSelf",true, batchArr)
        }
        
    }
}
</script>

<style>
.success-row {
    color: #409eff;
}
</style>
